<template>
  <div class="bg_f2" v-if="orders">
    <div class="ub bg_w pad_05 ub-pj">
      <div class="ub">
        <div class="ub-img detail_zengzhi"></div>
        <div class="ub ub-ac margin-l05">原订单号</div>
        <div class="ub ub-ac margin-l05">{{orders.code}}</div>
      </div>
      <div class="ub yellow">{{'￥' + orders.totalfare}}</div>
    </div>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub">
        <div class="ub-img tui_product"></div>
        <div class="ub ub-ac margin-l05">申退的增值产品</div>
        <!-- <div class="ub ub-ac margin-l05">123456789</div> -->
      </div>
      <!-- <div class="ub yellow">￥123</div> -->
    </div>
    <!-- <div class="ub fy_box bg_w ub-ver" v-for="(item, index) in orders.goods"> -->
    <div class="ub fy_box bg_w ub-ver" v-for="(item, index) in orders.goods" v-if="item.bookstatus === 'BOOKED' && item.sequencenum === '1'">
      <div class="ub ub-pj pad_05">
        <div class="ub">{{item.goodsName}}</div>
        <div class="ub yellow">{{'￥' + (item.saleprice || 0)}}</div>
      </div>
      <div class="ub pad_05">
        <div class="ub">{{item.flightNum}}</div>
        <div class="ub margin-l05">|</div>
        <div class="ub margin-l05">{{item.flightDate}}</div>
        <div class="ub margin-l05">{{item.beginCity+ '-' +item.endCity}}</div>
      </div>
    </div>
    <div class="ub wxts">
      温馨提示:航班正常情况下，不允许退订机上餐食，如因航空公司原因导致航班不正常时，请联系呼叫中心申请退款。
    </div>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub ub-ac">
        <div class="tui_why ub-img"></div>
        <div class="ub margin-l05">退票原因</div>
      </div>
      <div class="ub">
        <div class="ub">
          <div class="ub" @click="ifFreeWill = true">
            <div class="ub-img" :class="{'radio_checked': ifFreeWill , 'radio_unchecked': !ifFreeWill}"></div>
            <div class="ub margin-l05">自愿</div>
          </div>
          <div class="ub" @click="ifFreeWill = false">
            <div class="ub-img mar_l3" :class="{'radio_checked': !ifFreeWill , 'radio_unchecked': ifFreeWill}"></div>
            <div class="ub margin-l05">非自愿</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ub fc_8a lh_15 pad_05 bg_w fz08" v-show="ifFreeWill">
      将收取相应舱位价格一定比例的退票费，如果是变更后的客票退票，变更费票款，差额不退，按照变更后的舱位及退票时间收取相应退票费。
    </div>
    <textarea class="ub fc_8a lh_15 pad_05 bg_w txarea" placeholder="请填写退订原因，便于尽块通过审核并退款。" v-show="!ifFreeWill" v-model="textArea">
    </textarea>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub">
        <div class="ub-img" :class="{'radio_checked': ifAgree , 'radio_unchecked': !ifAgree}" @click="ifAgree = !ifAgree"></div>
        <div class="ub ub-ac margin-l05">我已同意西部航空</div>
        <div class="ub ub-ac margin-l05 fc_purple" @click="fuwuRule">《增值服务退款须知》</div>
      </div>
    </div>
    <div class="ub bg_w zanwei"></div>
    <div class="footer">
      <div class="ub ub-ac ub-pc" @click="applyCheck">提交申请</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
// import staticData from './tui.js'
const willArr = ['VOLUNTARY', 'INVOLUNTARY'];
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '申请退订增值产品',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '/home',
      rightIcon: 'homeIcon'
    });
    this.getFYDetail();
    // this.orders = staticData.content.orders;
  },
  data: function () {
    return {
      ifFreeWill: true,
      ifAgree: false,
      textArea: '',
      orders: ''
    }
  },
  components: {
  },
  computed: mapState(['loginData', 'allOrders']),
  methods: {
    doApplyCheck: function() {
      let self = this;
      this.$store.commit('setConfirm', { ifShow: true, text: '确定退订辅营？' });
      this.$store.commit('setConfirmCallBak', function () {
        // console.log('123');
        self.getContent();
      });
    },
    applyCheck: function () {
      console.log('123');
      if (!this.ifAgree) {
        this.$store.dispatch('showTx', { text: '请同意《增值服务退款须知》' });
        return false;
      }
      if (!this.ifFreeWill && !this.textArea) {
        this.$store.dispatch('showTx', { text: '非自愿退票需要填写原因' });
        return false;
      }
      this.doApplyCheck();
    },
    getContent: function () {
      let showOrder = this.allOrders.showOrder;
      let orderId = showOrder.orderId + '';
      // let reservationCode = showOrder.orderNo
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let paxIdsInfos = [];
      let refundType = this.ifFreeWill ? willArr[0] : willArr[1];
      let areatext = this.textArea;
      let reFundIds = [];
      let type = 4;
      this.orders.goods.forEach(function (item, index) {
        let baseprice = item.baseprice;
        let flightNum = item.flightNum;
        let beginCity = item.beginCity;
        let flightDate = item.flightDate;
        let goodsName = item.goodsName;
        let endCity = item.endCity;
        let obj = {
          baseprice,
          flightNum,
          beginCity,
          flightDate,
          goodsName,
          endCity
        }
        paxIdsInfos.push(obj);
        reFundIds.push(item.refundId);
      })
      let content = {
        refundType,
        paxIdsInfos,
        orderId,
        areatext,
        reFundIds,
        type,
        userId
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let self = this;
      this.$utils.ajax(data, 'doApplyViceCamp', self, function (data) {
        console.log(data);
        self.$store.dispatch('showTx', { text: '退定成功' });
        self.$router.push('/exit_success');
      }, function (err) {
        self.$store.dispatch('showTx', { text: err.message });
        self.$router.push('/exit_fail');
      })
    },
    checkCanFund: function (arr) {
      console.log(arr);
      let flag = false;
      arr.forEach(function (item) {
        if (item.bookstatus === 'BOOKED' && item.sequencenum === '1') {
          console.log('in');
          flag = true;
          return true;
        }
      });
      return flag;
    },
    fuwuRule: function () {
      let content = {
        columnId: '141',
        detail: '',
        listTitle: '增值服务退款须知',
        detailTitle: '',
        newsTypeId: '',
        firstDate: [],
        secondDate: []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    getFYDetail: function () {
      let showOrder = this.allOrders.showOrder;
      let orderId = showOrder.orderId + '';
      // let reservationCode = showOrder.orderNo
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let content = {
        orderId: orderId,
        userId: userId
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      // this.successDo();
      let self = this;
      this.$utils.ajax(data, 'applyViceCamp', self, function (data) {
        console.log(data);
        let content = data.content;
        let orders = content.orders;
        let checkFlag = self.checkCanFund(orders.goods);
        console.log(checkFlag);
        if (!checkFlag) {
          self.$store.commit('setMsgCb', function () {
            console.log('msgcb');
            // this.$store.commit('setMsgCb');
            self.$router.go(-1);
          });
          self.$store.commit('setMsg', {
            ifshow: true,
            showMsg: true,
            msgTitle: '温馨提示',
            msgContent: '您的机票暂未退票，不能退订增值服务。如需退订增值服务，请先完成退票操作。如果您所乘航班发生延误或变更，请联系呼叫中心进行退订。',
            msgBtn: '确定'
          });
          return false;
        }
        self.orders = orders;
      })
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '../../stylus/base.styl';
.detail_zengzhi
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('detail_zengzhi@2x.png');
.tui_product
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_product.png');
.tui_why
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_why.png');
.yellow
  color: #FF9D00;
.wxts
  background-color: #EEDAF5;
  color: #854a95;
  padding: f_times(0.8);
  font-size: f_times(0.8);
  line-height: f_times(1.2);
.radio_checked
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_radio_checked.png');
.radio_unchecked
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_radio_unchecked.png');
.tui_info
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_info.png');
.mar_l3
  margin-left: f_times(3);
.fc_8a
  color: #8a8a8a;
.fc_purple
  color: #843D99;
.lh_15
  line-height: f_times(1.5);
.border_t01
  border-top: 1px solid #f2f2f2;
.txarea
  height: 10rem;
  width: 100%;
  outline: 0;
  border: 0;
  background: #F3F3F3;
  box-sizing: border-box;
.zanwei
  width: 100%;
  height: f_times(3);
.footer
  width: 100%;
  height: f_times(2.5);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  >div
    height: 100%;
    width: 60%;
    color: #fff;
    background: #843D99;
    margin: 0 auto;
    border-radius: 4px;
.fy_box
  margin-top: f_times(0.2);
  padding-left: f_times(2);
</style>